<template>
  <div
    class="index-frame"
    v-if="!(head && middle && tail && low)"
    v-loading="!(head && middle && tail && low)"
    style="height: 100vh"
  ></div>
  <div class="index" v-else>
    <TopCard class="m-bt-15" :data="head.headSoftRecommendVos" />

    <div class="main">
      <div class="main-left">
        <!-- 软件分类 -->
        <SoftType :data="head.typeVos" />
      </div>

      <div class="main-center">
        <!-- 轮播图 -->
        <BannerCenter :data="head.focusSoftVos" />

        <!-- 最新资讯 -->
        <NewstNews class="m-t-15" :data="head.newInfoVos" />

        <!-- 最近更新 -->
        <RecentUpdates class="m-t-15" :data="middle.newSoftVos" />

        <!-- 最近游戏 -->
        <NewestGame class="m-t-15" :data="middle.newGameSoftVos" />
      </div>

      <div class="main-right">
        <RecommendedSoft :data="head.rightSoftRecommendVos" />

        <GreenSoft class="m-t-15" :data="middle.greenSoftRecommendVos" />
      </div>
    </div>

    <div class="m-bt-15">
      <Advertisement :width="'100%'" />
    </div>

    <div class="main">
      <div class="main-left-m">
        <Necessary :data="middle.necessarySoftVos" />
      </div>

      <div class="main-right-m">
        <HotSoft :data="middle.hotSoftVos" />
      </div>
    </div>

    <div class="main">
      <div class="main-center-m">
        <HotGame class="m-bt-15" :data="tail" />
      </div>
    </div>

    <div class="m-b-15">
      <Advertisement :width="'100%'" />
    </div>

    <div class="m-bt-15">
      <Tutorial class="m-bt-15" :data="low" />
    </div>

    <div class="m-bt-15">
      <SoftUpdate class="m-bt-15" :data="low" />
    </div>

    <div class="m-bt-15">
      <FriendLink class="m-bt-15" :data="low" />
    </div>
  </div>
</template>

<script setup>
import TopCard from "@/components/TopCard.vue";
import SoftType from "@/components/SoftType.vue";
import BannerCenter from "@/components/BannerCenter.vue";
import NewstNews from "@/components/NewstNews.vue";
import GreenSoft from "@/components/GreenSoft.vue";
import RecentUpdates from "@/components/RecentUpdates.vue";
import NewestGame from "@/components/NewestGame.vue";
import Advertisement from "@/components/Advertisement.vue";
import HotSoft from "@/components/HotSoft.vue";
import RecommendedSoft from "@/components/RecommendedSoft.vue";
import Necessary from "@/components/Necessary.vue";
import Tutorial from "@/components/Tutorial.vue";
import HotGame from "@/components/HotGame.vue";
import FriendLink from "@/components/FriendLink.vue";
import SoftUpdate from "@/components/SoftUpdate.vue";
import { onBeforeMount, ref } from "vue";

const head = ref(null);
axios.get("/api/download/home/head").then((res) => {
  head.value = res.data.data;
});

const middle = ref(null);
axios.get("/api/download/home/middle").then((res) => {
  middle.value = res.data.data;
});

const tail = ref(null);
axios.get("/api/download/home/tail").then((res) => {
  tail.value = res.data.data;
});

const low = ref(null);
axios.get("/api/download/home/low").then((res) => {
  low.value = res.data.data;
});
</script>

<style lang="less" scoped>
.index {
  min-height: 500px;

  .index-content {
    background: #fff;
  }

  .main {
    display: flex;
    justify-content: space-between;

    &-left {
      width: 25%;
    }

    &-left-m {
      width: 74.5%;
    }

    &-center {
      width: 49%;
    }

    &-center-m {
      width: 100%;
    }

    &-right {
      width: 25%;
    }

    &-right-m {
      width: 25%;
    }
  }
}
</style>
